<!DOCTYPE HTML>
<HTML>

<HEAD>
    <TITLE>REGISTRATION DETAILS</TITLE>
    <STYLE>
        h1,
        h3 {
            Color: black;
            Font-size: 40px;
            text-align: center;
        }
        /* #button {
            margin-left: 880px;
        } */
    </STYLE>
    <SCRIPT>
        function show() {
            var fname = document.getElementById("txtbox1").value;
            var lname = document.getElementById("txtbox2").value;
            var age = document.getElementById("age").value;
            var address = document.getElementById("address").value;
            var gender = document.getElementById("gender").value;
            confirm("You have entered:" + "\n Name : " + fname + " " + lname + "\n Age : " + age + "\n Address : " + address + "\n Gender : " + gender + "\n\n Do you want to confirm these details ?");
        }

        function changeColor(val) {
            if ((val.value == "") || (val.value == null)) {
                val.style.background = "pink";
            } else {
                val.style.background = "#FFFFFF";
            }
        }
    </SCRIPT>
</HEAD>

<BODY>
    <H1>USER REGISTRATION DETAILS
    </H1>
    <HR/>
    <H3>Please fill the following details and get registered !!</H3>
    <BR/>
    <BR/>
    <TABLE align="center" border="2" bordercolor="white" cellpadding="10px" bgcolor="beige">
        <TR>
            <TD> First name: </TD>
            <TD>
                <INPUT type="text" name="name1" id="txtbox1" onblur="changeColor(this)" /> </TD>
        </TR>
        <TR>
            <TD> Last name: </TD>
            <TD>
                <INPUT type="text" name="name2" id="txtbox2" onblur="changeColor(this)" />
            </TD>
        </TR>
        <TR>
            <TD> Age: </TD>
            <TD>
                <INPUT type="text" name="age_box" id="age" onblur="changeColor(this)" /> </TD>
        </TR>
        <TR>
            <TD> Address:</TD>
            <TD>
                <TEXTAREA rows="5" name="address_box" id="address" onblur="changeColor(this)"></textarea>
            </TD>
        </TR>
        <TR>
            <TD> Gender: </TD>
            <TD>
                <SELECT name="Gender" id="gender"> 
                    <OPTION value="Male">Male</OPTION>
                    <OPTION value="Female">Female</OPTION> 
                </SELECT>
            </TD>
        </TR>
    </TABLE>
    <BR/>
    <div style="text-align: center;">
        <INPUT id="button" type="button" value="Register Me" onclick="show()" />
    </div>

</BODY>

</HTML>